<template>
  <div>
    <over-box
      headText="预约信息"
      eventString="openResInfo"
      @getEventArg="getReserTablesInfo"
    >
      <v-sheet color="thirdary" class="fontblack--text"
        ><v-container class="d-flex flex-column align-center">
          <v-avatar size="180" color="primary" class="mt-2">
            <v-img :src="doctorInfo ? doctorInfo.avatar : ''"></v-img>
          </v-avatar>
          <div class="primary--text text-h6 mt-2">
            {{ doctorInfo ? doctorInfo.name : "" }}
          </div>
          <div class="text-body-2">
            {{ doctorInfo ? doctorInfo.hospitalName : "" }}
          </div>
          <div class="mt-5 primary--text">预定时间</div>
          <div class="d-flex justify-center">
            <span class="mr-1">{{
              reserTablesInfo ? reserTablesInfo.date : ""
            }}</span>
            <span class="error--text ml-1">
              {{ reserTablesInfo ? reserTablesInfo.time : "" }}
            </span>
          </div>
          <div></div> </v-container
      ></v-sheet>
    </over-box>
    <v-sheet color="primary pa-5 d-flex" height="150">
      <v-container>
        <div class="d-flex">
          <div class="d-flex">
            <div>
              <v-avatar size="80" color="thirdary">
                <v-img :src="userInfo ? userInfo.avatar : ''"></v-img>
              </v-avatar>
            </div>
            <div class="d-flex flex-column ml-2">
              <div class="fontwhite--text text-h6">
                {{ userInfo ? userInfo.nickname : "" }}
              </div>
              <v-sheet
                color="secondary"
                class="fontblack--text d-flex justify-center rounded-pill text-caption"
                width="80"
                ><span>实名认证</span></v-sheet
              >
              <div class="fontwhite--text mt-2">
                电话号码:<span>{{ userInfo ? userInfo.phone : "" }}</span>
              </div>
            </div>
          </div>
          <v-spacer></v-spacer>
        </div>
      </v-container>
    </v-sheet>
    <v-container
      ><div>
        <my-reser :ReserTables="ReserTables"></my-reser>
      </div>
    </v-container>
  </div>
</template>



<script>
import OverBox from "../components/common/overBox.vue";
import myReser from "../components/personage/myReservation.vue";
import eventBus from "../eventBus/eventBus";
export default {
  components: { myReser, OverBox },
  data() {
    return {
      userInfo: null,
      profile: null,
      ReserTables: [],
      reserTablesInfo: null,
    };
  },
  computed: {
    doctorInfo() {
      return this.reserTablesInfo ? this.reserTablesInfo.doctorInfo : null;
    },
  },
  methods: {
    getReserTablesInfo(value) {
      this.reserTablesInfo = value;
    },
  },
  async mounted() {
    const { data: profile } = await this.$axios.get("profile");
    this.profile = profile;
    if (profile && !profile.isDoctor) {
      const userInfo = await this.$store.dispatch(
        "getUserInfo",
        profile.userId
      );
      if (userInfo) {
        this.userInfo = userInfo;
        const { data } = await this.$axios.get(
          `reser-table/getReserTableWithUser?userInfoId=${userInfo?.id}`
        );
        if (data?.length) {
          this.ReserTables = data;
        }
      }
    }
    if (!this.profile) {
      eventBus.$emit("openLoginBox");
    }
  },
};
</script>



<style lang="scss" scoped>
</style>
